<template>
	<view class="background">
		<view class="header flex-end">
			<view :class="index==0?'pitch':''" @click="navIndex(0)">
				我的矿机
			</view>
			<view :class="index==1?'pitch':''" @click="navIndex(1)">
				矿机商店
			</view>
			<view :class="index==2?'pitch':''" @click="navIndex(2)">
				过期矿机
			</view>
		</view>
		<swiper :duration="400" :current="index" class="length" @change="_index">
			<swiper-item >
				<view class="swiper-item">
					<view class="surface-title">
						试炼矿机
					</view>
					<view class="surface">
						<view class="">
							3小时
						</view>
						<view class="">
							砖石产量：12枚
						</view>
						<view class="">
							运行周期：47枚
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="length">
				<view class="swiper-item length">
					<view class="surface-title">
						试炼矿机
					</view>
					<view class="surface flex-end">
						<view class="">
							<view class="">
								奖励活跃度：1
							</view>
							<view class="">
								兑换所需：10枚
							</view>
							<view class="">
								砖石产量：12枚
							</view>
							<view class="">
								运行周期：47枚
							</view>
						</view>
						<view class="surface-btn" @click="alert()">
							兑换
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
					<view class="swiper-item length">
						<view class="surface-title">
							试炼矿机
						</view>
						<view class="surface flex-end">
							<view class="">
								<view class="">
									奖励活跃度：1
								</view>
								<view class="">
									兑换所需：10枚
								</view>
								<view class="">
									砖石产量：12枚
								</view>
								<view class="">
									运行周期：47枚
								</view>
							</view>
							<view class="surface-btn" @click="alert1()">
								激活
							</view>
						</view>
					</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0
			}
		},
		methods: {
			_index(e){
				console.log(e)
				this.index=e.detail.current
			},
			navIndex(e){
				this.index=e
			},
			alert(){
				uni.showModal({
					title:"确定消耗10枚钻石",
				})
			},
			alert1(){
				uni.showModal({
					title:"确定消耗10枚钻石激活"
				})
			},
		}
	}
</script>

<style>
	.surface-btn{
		text-align: center;
		line-height: 60rpx;
		width: 100rpx;
		height: 60rpx;
		font-size: 32rpx;
		border-radius: 12rpx;
		background: white;
		color: #F0AD4E;
		}
	.surface-title{
		margin-top: 20rpx;
		color: #F0AD4E;
	}
	.surface{
		border-radius: 12rpx ;
		background: #F0AD4E;
		color: white;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 32rpx;
		line-height: 50rpx;
		margin-top: 20rpx;
	}
	.length{
		min-height: 70vh;
		overflow-y: scroll;
	}
	.header{
		width: 100%;
		font-size: 32rpx;
	}
	.header>view{
		text-align: center;
		width: 33.33%;
		color: white;
		background: #F0AD4E;
		height: 60rpx;
		line-height: 60rpx;
	}
	.pitch{
		background: white!important;
		color: #F0AD4E!important;
	}
</style>
